<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <style>
    /* 容器样式 */
    #container {
      position: relative;
      width: 600px;
      height: 400px;
      margin: 50px auto;
    }

    /* 菱形图片样式 */
    .diamond {
      position: absolute;
      width: 50px;
      height: 50px;
      transform: rotate(45deg);
      overflow: hidden;
    }

    /* 图片样式 */
    .diamond img {
      width: 100%;
      height: 100%;
      transform: rotate(-45deg);
    }
  </style>
</head>

<body>
  <div id="container">

  </div>
  <script>
    const imagePath = './微信图片_20250313143444.png'
    // 图片数量
    const numImages = 20
    // 椭圆的长半轴
    const a = 500
    // 椭圆的短半轴
    const b = 100
    // 容器元素
    const container = document.getElementById('container')
    // 创建并添加图片元素
    for (let i = 0; i < numImages; i++) {
      const diamond = document.createElement('div')
      diamond.classList.add('diamond')
      const img = document.createElement('img')
      img.src = imagePath
      diamond.appendChild(img)
      container.appendChild(diamond)
    }

    // 获取所有菱形元素
    const diamonds = document.querySelectorAll('.diamond')

    // 旋转角度
    let angle = 0

    // 动画函数
    function animate () {
      // 定义水平和垂直偏移量
      const offsetX = 50
      const offsetY = 30

      diamonds.forEach((diamond, index) => {
        const currentAngle = (index / numImages) * 2 * Math.PI + angle
        const x = a * Math.cos(currentAngle)
        const y = b * Math.sin(currentAngle)
        // 在计算位置时添加偏移量
        diamond.style.left = `calc(50% + ${x - 25 + offsetX}px)`
        diamond.style.top = `calc(50% + ${y - 25 + offsetY}px)`
      })

      angle += 0.001
      requestAnimationFrame(animate)
    }

    // 开始动画
    animate();
  </script>
</body>

</html>

